<template>
	<view>
		<!-- 订单号 -->
		<uni-card>
			<text class="card-title">{{orderId}}</text>
			<view class="divider" />
			<view v-for="(item,index) in category" :key="index" style="margin-top: 10px;margin-bottom: 15px;">
				<text
					style="font-size: 18px;opacity:0.8;font-weight: 700;display: block;margin-bottom: 10px;">{{item}}</text>
				<view v-for="(good,key) in orderList" :key="key">
					<view v-if="good.secondaryClassification == item">
						<text style="margin-left: 15px;font-size: 18px">
							<uni-row style="margin-top: -5%;">
								<uni-col :span="12">
									{{good.entryName}}:
								</uni-col>
								<uni-col :span="6">
									×{{good.quantity}}{{good.unit}}
								</uni-col>
								<uni-col :span="6">
									￥{{good.totalAmount}}
								</uni-col>
							</uni-row>
						</text>
						<!-- <text style="margin-left: 5%;">{{good.entryName}}:{{good.quantity}}{{good.unit}}</text> -->
					</view>
				</view>
			</view>
			<view class="divider" />
			<view style="margin-top: 5%;margin-left: 50%;">合计：￥<text
					style="font-size: 22px;font-weight: 700;">{{totalVal}}</text></view>
		</uni-card>
		<!-- <text @click="dialogToggle">弹出窗口</text> -->
		<!-- 弹出框 -->
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog type="error" cancelText="关闭" confirmText="确定" title="提示"
					content="订单号已生成!\n请牢记您的订单号或截图保存!\n一旦退出,您将不再能看到该订单号!" />
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		listOrdering
	} from "@/api/module/wtc/ordering.js"
	export default {
		data() {
			return {
				// 桌号
				tableId: '',
				// 游客ID
				visiteId: '',
				// 订单号
				orderId: '',
				// 遮罩层
				loading: true,
				// 总条数
				total: 0,
				// 类别
				category: [],
				// 点单信息表格数据
				orderList: [],
				// 查询参数
				queryParams: {
					visitorId: null,
					tableNumber: null,
					entryName: null,
					projectCategory: null,
					firstLevelClassification: null,
					secondaryClassification: null,
					tertiaryClassification: null,
					projectCode: null,
					mnemonicCode: null,
					unit: null,
					unitPrice: null,
					quantity: null,
					orderNumber: null,
					note1: null,
					note2: null,
					note3: null,
					note4: null,
					note5: null,
					note6: null,
					note7: null,
					note8: null,
					note9: null,
					note10: null
				},
			};
		},
		// 左上角返回按钮
		onBackPress(options) {
			let self = this;
			if (options.from === 'navigateBack') {
				return false;
			}
			// console.log("要指定返回的页面");
			const table = this.tableId
			uni.navigateTo({
				url: '/pages/module/wtc/index?table=' + table
			})
			return true;
		},
		created() {
			const code = this.$route.query.code
			const val = this.$route.query.totalVal
			this.orderId = code
			this.totalVal = val
			this.getList(this.orderId)
		},
		mounted() {
			this.$refs.alertDialog.open()
		},
		methods: {
			// 查询项目信息列表
			getList(orderId) {
				// console.log(orderId)
				if (this.orderId == '' || this.orderId == null || this.orderId == 'undefined') {
					this.queryParams.orderNumber = 0;
				} else {
					this.queryParams.orderNumber = orderId;
				}
				this.loading = true;
				listOrdering(this.queryParams).then(res => {
					this.orderList = res.rows;
					this.total = res.total;
					this.loading = false;
					for (let i = 0; i < this.orderList.length; i++) {
						if (this.category.includes(this.orderList[i].secondaryClassification)) {
							continue;
						} else {
							this.category.push(this.orderList[i].secondaryClassification)
						}
					}
					this.tableId = this.orderList[0].tableNumber
				})
			},
		}
	}
</script>

<style>
	.card-title {
		display: block;
		text-align: center;
		margin-top: 10%;
		margin-bottom: 10%;
		font-weight: 700;
		font-size: 48px;
	}

	.divider {
		margin-top: 8rpx;
		margin-bottom: 8rpx;
		margin-right: -2%;
		margin-left: -2%;
		background: #E0E3DA;
		width: 104%;
		height: 1rpx;
	}
	
	.uni-card ::v-deep .uni-card__content {
	  padding-left: 5px !important;
	  padding-right: 5px !important;
	 }
</style>
